<template>
  <div class="homepage">
    <div class="top">
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/zcqy.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{zcqy || 0}}</p>
          <p class="title">注册企业(家)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/qy.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{sign.sqqy || 0}}</p>
          <p class="title">授权企业(家)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/jg.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{sign.rzjrjg || 0}}</p>

          <p class="title">入驻金融机构(家)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/rzhs.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{dataReport.rzhs || 0}}</p>

          <p class="title">获得融资的企业户数(户)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/xyDkje.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{dataReport.rzje  || 0}}</p>

          <p class="title">获得融资金额(万元)</p>
        </div>
      </div>
      <!-- <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/dsq.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{sign.dspsqxy || 0}}</p>
          <p class="title">待审批授权协议(个)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/ysq.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{sign.byysqqy || 0}}</p>
          <p class="title">本月已授权企业(家)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/qy.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{sign.sqqy || 0}}</p>
          <p class="title">授权企业(家)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/zcqy.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{zcqy || 0}}</p>
          <p class="title">注册企业(家)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/jg.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{sign.rzjrjg || 0}}</p>

          <p class="title">入驻金融机构(家)</p>
        </div>
      </div> -->
    </div>
    <div class="top" style="margin-top:20px">
      <!-- <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/rzhs.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{dataReport.rzhs || 0}}</p>

          <p class="title">获得融资的企业户数(户)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/xyDkje.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{dataReport.rzje  || 0}}</p>

          <p class="title">获得融资金额(万元)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/bnljSxQyhs.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{dataReport.bnljSxQyhs || 0}}</p>

          <p class="title">本年累计首次申请授信的企业户数(户)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/scHdsxQyhs.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{dataReport.scHdsxQyhs || 0}}</p>

          <p class="title">首次申请并获得授信的企业户数(户)</p>
        </div>
      </div>
      <div class="info">
        <div class="img">
          <img src="../../../assets/staticPicture/scHdsxDkje.png" alt="" width="32">
        </div>
        <div class="msg">
          <p class="num">{{dataReport.scHdsxDkje || 0}}</p>

          <p class="title">首次申请并获得授信的贷款金额(万元)</p>
        </div>
      </div> -->
    </div>
    <div class="searchMain">
      <span>企业查询</span>
      <div class="search">
        <el-autocomplete
            v-model="value"
            style="width:100%"
            clearable
            :fetch-suggestions="querySearchAsync"
            :trigger-on-focus="false"
            @select="handleSearch"
            placeholder="请输入企业名称或社会统一信用代码"
        >
            <span slot="append" @click="handleSearch">查询</span>
        </el-autocomplete>
      </div>
    </div>
    <div class="basicInfo">
      <div class="chart">
        <div class="title">
          <!-- <span>企业授权趋势</span> -->
          <el-select v-model="time" placeholder="请选择" @change="getQySqqs">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-radio-group v-model="time">
            <el-radio-button :label="item.value" v-for="item in timeOptions" :key="item.value">{{item.label}}</el-radio-button>
          </el-radio-group> -->
        </div>
        <div class="trend" id="sqqs"></div>
      </div>
      <div class="chart">
        <!-- <div class="title">授权企业区域分布</div> -->
        <div class="trend" id="qyfb"></div>
      </div>
    </div>
    <div class="basicInfo">
      <div class="chart">
        <!-- <div class="title">近6个月企业画像查询次数</div> -->
        <div class="trend" id="hxcs"></div>
      </div>
      <div class="chart">
        <!-- <div class="title">入驻金融机构</div> -->
        <div class="trend" id="jrjg"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getCbInfo,getHistory,qyxxLikeQuery} from '@/api/portay'
import {sqxx,zxSign,qySqqs,hxcxQs,rzjgTu} from "@/api/chart";
import {searchDataFilling} from '@/api/report.js'
export default {
    data() {
        return {
            value:'',
            sign:{},
            dataReport:{},
            zcqy:'',
            company:[],
            restaurants: [],
            timeout:  null,
            time:'1',
            timeOptions:[
              {label:'近6个月',value:'1'},
              {label:'近一年',value:'2'},
              {label:'近三年',value:'3'},
            ]
        }
    },
    created() {
        //this.init();
        this.getZxSign();
        this.getCurFilling();
    },
    mounted(){
      this.$nextTick(()=>{
        this.getQySqqs();
        this.sqxx();
        this.getHxcxQs();
        this.getRzjgTu();
      })
    },
    methods: {
        getZxSign(){
          zxSign().then(res=>{
            if(res.status){
              this.sign = res.data;
              this.zcqy = this.sign.dspsqxy + this.sign.sqqy
            }
          })
        },
        getCurFilling(){
          let curDate = new Date()
          let year = curDate.getFullYear();
          let month = (curDate.getMonth()) > 9 ? (curDate.getMonth()) : '0'+(curDate.getMonth());
          let day = curDate.getDate()
          let params = {}
          //2022-11、2022-12比较特殊（获取的都是2022-11的数据）
          if(year == 2022 && (curDate.getMonth()+1 == 11 || curDate.getMonth()+1 == 12)){
            params.date = '2022-11'
          }else{
            if(day > 10){
              //day > 10 获取当月填报报表数据(即累计到上月的数据)
              params.date = curDate.getMonth() > 0 ? (year + '-' + month) : (year - 1 + '-12')
            }else{
              //获取上月填报报表数据(即累计到上上月的数据)
              if((curDate.getMonth()-1) > 0){//3月以上 获取(m-2)的数据,m代表当前月份
                month = (curDate.getMonth()-1) > 9 ? (curDate.getMonth()-1) : '0'+(curDate.getMonth()-1);
                params.date = year + '-' + month;
              }else if((curDate.getMonth()-1) == 0){//2月 获取去年12月的数据
                params.date = year - 1 + '-12';
              }else{//1月 获取去年11月的数据
                params.date = year - 1 + '-11';
              }
            }
          }
          searchDataFilling(params).then(data => {
              if (data.status) {
                  let len = data.data.length
                  if(len > 0){
                    this.dataReport = data.data[len-1]
                  }
              }else{
                this.$message.error(data.msg);
              }
          });
        },
        querySearchAsync(queryString, cb) {
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
              if(queryString){
                qyxxLikeQuery({field:queryString.trim()}).then(res=>{
                    this.restaurants = res.data.map(item=>{
                        return {value:item.qymc+'（'+item.shtyxydm+'）',shtyxydm:item.shtyxydm,qymc:item.qymc}
                    });
                    cb(this.restaurants);
                })
              }
            }, 3000 * Math.random());
        },
        //查询历史列表
        init(){
            getHistory().then(res=>{
                if(res.status){
                    this.company = res.data.map(item=>{
                        return {name:item}
                    })
                }
            })
        },
        //点击查询
        handleSearch(item){
            let feilds;
            if(item.qymc){
              this.value = item.qymc;
              feilds = item.shtyxydm;
            }else{
              feilds = this.value.trim();
              if(!feilds)return
            }
            getCbInfo({feilds}).then(res=>{
                if(res.status){
                    let comInfo = res.data;
                    sessionStorage.setItem('comInfo',JSON.stringify(comInfo))
                    this.$router.push({ path: '/portray1/companyMessage'});
                }else if(res.code != '401' && !(res.status)){
                    this.$message({
                        message: `${res.msg}`,
                        type: 'warning'
                    });
                }
            })
        },
        //点击历史项
        handleClick(item){
            let feilds = item.name;
            getCbInfo({feilds}).then(res=>{
                if(res.status){
                    let comInfo = res.data;
                    sessionStorage.setItem('comInfo',JSON.stringify(comInfo))
                    this.$router.push({ path: '/portray1/companyMessage'});
                }else if(res.code != '401' && !(res.status)){
                    this.$message({
                        message: `${res.msg}`,
                        type: 'warning'
                    });
                }
            })
        },
        //企业授权趋势
        getQySqqs(){
          let xData = []
          let yData = []
          qySqqs({type:this.time}).then(res=>{
            if(res.status){
                res.data.map(item=>{
                  xData.push(item.lastDays);
                  yData.push(item.num);
                })
                this.sqqsTrend(xData,yData)
            }
          })
        },
        sqqsTrend(xData,yData){
          if(yData.length !== 0){
            let chartDom = document.getElementById('sqqs');
            let sqqsChart = echarts.init(chartDom);
            let option;

            option = {
              title: {
                text: '企业授权趋势'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{interval:0,rotate:this.time == '2' ? 45:0},
                data: xData
                /* data: ['2022-06','2022-07','2022-08','2022-09','2022-10','2022-11',] */
              },
              yAxis: {
                type: 'value',
                name: "单位（家）",
                nameTextStyle: {
                  color: "#aaa",
                  nameLocation: "start",
                },
              },
              series: [
                {
                  data: yData,
                  /* data: [3,4,0,0,590,15840],  */
                  type: 'line',
                  label: {
                    show: true,
                    position: 'top'
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#5b8ffc' },
                      { offset: 0.5, color: '#dde5fc' },
                      { offset: 1, color: '#fefeff' }
                    ]),
                  }
                }
              ]
            };

            option && sqqsChart.setOption(option);
            window.addEventListener("resize",()=>{
                sqqsChart.resize();
            });
          }else{
            var html = `<div style="position: relative;"><sapn style="position: absolute;top: 4px;font-size: 18px;font-weight: bold;">企业授权趋势</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
            document.getElementById("sqqs").innerHTML = html
            document.getElementById("sqqs").removeAttribute('_echarts_instance_')
          }
        },
        compare(prop) {
          return function (obj1, obj2) {
            var val1 = obj1[prop];
            var val2 = obj2[prop];
            if (val1 < val2) {
              return 1;
            } else if (val1 > val2) {
              return -1;
            } else {
              return 0;
            }  
          } 
        },
        //授权企业的区域分布
        async sqxx(){
            let data = await sqxx();
            let list = data.data.companyQY || [];
            let xData = []
            let yData = []
            list.sort(this.compare('num'))
            for (var i = 0; i < list.length; i++) {
                if(list[i].SSQU){
                  xData.push(list[i].SSQU);
                }else{
                  xData.push('');
                }
                yData.push(list[i].num);
            }
            this.qyfbTrend(xData,yData)
        },
        qyfbTrend(xData,yData){
          if(yData.length !== 0){
            let chartDom = document.getElementById('qyfb');
            let qyfbChart = echarts.init(chartDom);
            let option;

            option = {
              title: {
                text: '授权企业的区域分布'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                axisLabel:{
                  interval:0,
                  rotate:45,
                  /* formatter:function(value){
                      return value.split("").join("\n");
                  } */
                },
                data: xData
                /* data: ['崇川区','启东市','海安市','通州区','海门区','如东县','如皋市','经济技术开发区','其他'] */
              },
              yAxis: {
                type: 'value',
                name: "单位（家）",
                nameTextStyle: {
                  color: "#aaa",
                  nameLocation: "start",
                },
              },
              series: [
                {
                  data: yData,
                  /* data: [6794,3360,2149,1933,892,647,542,75,45],  */
                  type: 'bar',
                  smooth: true,
                  showSymbol: false,
                  barWidth:'30%',
                  itemStyle: {
                    color: '#3c6bed',
                  },
                  label: {
                    show: true,
                    position: 'top'
                  },
                }
              ]
            };

            option && qyfbChart.setOption(option);
            window.addEventListener("resize",()=>{
                qyfbChart.resize();
            });
          }else{
            var html = `<div style="position: relative;"><sapn style="position: absolute;top: 4px;font-size: 18px;font-weight: bold;">授权企业的区域分布</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
            document.getElementById("qyfb").innerHTML = html
            document.getElementById("qyfb").removeAttribute('_echarts_instance_')
          }
        },
        //画像查询次数
        getHxcxQs(){
          let xData = []
          let yData = []
          hxcxQs().then(res=>{
            if(res.status){
              res.data.map(item=>{
                xData.push(item.lastDays);
                yData.push(item.num);
              })
              this.hxcsTrend(xData,yData)
            }
          })
        },
        hxcsTrend(xData,yData){
          if(yData.length !== 0){
            let chartDom = document.getElementById('hxcs');
            let hxcsChart = echarts.init(chartDom);
            let option;

            option = {
              title: {
                text: '近6个月企业画像查询次数'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{interval:0},
                data: xData
              },
              yAxis: {
                type: 'value',
                name: "单位（次）",
                nameTextStyle: {
                  color: "#aaa",
                  nameLocation: "start",
                },
              },
              series: [
                {
                  data: yData,
                  type: 'line',
                  // smooth: true,
                  // showSymbol: false,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#5b8ffc' },
                      { offset: 0.5, color: '#dde5fc' },
                      { offset: 1, color: '#fefeff' }
                    ]),
                  }
                }
              ]
            };

            option && hxcsChart.setOption(option);
            window.addEventListener("resize",()=>{
                hxcsChart.resize();
            });
          }else{
            var html = `<div style="position: relative;"><sapn style="position: absolute;top: 4px;font-size: 18px;font-weight: bold;">近6个月企业画像查询次数</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
            document.getElementById("hxcs").innerHTML = html
            document.getElementById("hxcs").removeAttribute('_echarts_instance_')
          }
        },
        //入驻金融机构
        getRzjgTu(){
          let data = []
          rzjgTu().then(res=>{
            if(res.status){
              res.data.map(item=>{
                data.push({value:item.num,name:item.dept_value})
              })
              this.jrjgTrend(data)
            }
          })
        },
        jrjgTrend(data){
          if(data.length !== 0){
            let chartDom = document.getElementById('jrjg');
            let jrjgChart = echarts.init(chartDom);
            let option;

            option = {
              title: {
                text: '入驻金融机构'
              },
              series: [
                {
                  type: 'pie',
                  radius: ['40%', '70%'],
                  data: data,
                  itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{ 
                        label:{ 
                            show: true, 
                            formatter: '{b} : {c}家\n占比{d}%' //带当前图例名 + 百分比
                            //formatter: '{d}%' //只要百分比
                        }, 
                        labelLine :{show:true} 
                    } 
                  },
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

            option && jrjgChart.setOption(option);
            window.addEventListener("resize",()=>{
                jrjgChart.resize();
            });
          }else{
            var html = `<div style="position: relative;"><sapn style="position: absolute;top: 4px;font-size: 18px;font-weight: bold;">入驻金融机构</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
            document.getElementById("jrjg").innerHTML = html
            document.getElementById("jrjg").removeAttribute('_echarts_instance_')
          }
        }
    }
}
</script>

<style scoped="scoped" lang="scss">
.homepage{
  width:100%;
  padding:20px;
  background-color: #f5f5f5;
}
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  p{
    padding: 0;margin: 0;
  }
  .info{
    width: 19%;
    padding: 20px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 6px 2px #eeeeee;
    .img{
      width: 80px;
      height: 80px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #3c6bed;
    }
    .msg{
      margin-left: 20px;
      width: 180px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      
      .title{
        font-size: 16px;
      }
    }
    .num{
      font-size: 24px;
      font-weight: bold;
    }
  }
}
.searchMain{
    margin-top: 20px;
    padding: 20px 0;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-weight: bold;
}
.search{
    margin-left: 20px;
    width: 500px;
    /deep/ .el-input-group__append, .el-input-group__prepend{
        background-color: #4285f4;
        color: #fff;
        border: none;
    }
    /deep/ .el-input-group__append, .el-input-group__prepend:hover{
        cursor: pointer;
    }
}
.basicInfo{
    widows: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .chart{
      width: 49%;
      background-color: #fff;
      box-shadow: 0 0 4px 4px #eeeeee;
      border-radius: 10px;
      padding: 20px;
      position: relative;
      .title{
          position:absolute;
          right: 10px;
          z-index: 10;
          font-size: 20px;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .trend{height: 400px;width: 100%;}
    }
}
</style>